<template>
  <div class="wg-detail">
    <mt-swipe :auto=3000>
      <mt-swipe-item  v-for="(item, index) of clothes.picurls" :key='index' ><img :src="'https://cdn.bestseller.com.cn' + item" alt=""></mt-swipe-item>
    </mt-swipe>
    <div class="name">{{clothes.goodsName}}</div>
    <div class="price"><s v-if="clothes.discount*10 !== 10">原价：¥{{clothes.originalPrice}}</s>现价：¥{{clothes.price}}<span v-if="clothes.discount*10 !== 10">{{clothes.discount*10}}折</span></div>
    <div class="color">颜色：{{clothes.color}}</div>
    <div class="size">
     <span>size：</span>
     <span
        v-for="(size, index) in clothes.sizes"
        :key="index"
      >
        {{size.size}}
      </span>
    </div>
    <mt-button
      type="primary"
      class="addToCart"
      @click="addCart({
        id: clothes.colorCode,
        name: clothes.goodsName,
        src: clothes.picurls[0],
        price: clothes.price,
        count: 1,
        checked: false
      })"
    >
      添加购物车
    </mt-button>
    <div class="like">-------------猜你喜欢-----------</div>
    <div class="randomitem">
        <router-link v-for="(items, index) of clothes2" :key="index" :to="{name:'detail',query:{id:items.colorCode}}" @click.native='reload'>
          <img :src="'https://cdn.bestseller.com.cn' + items.picurls[0]" alt="">
          <div class="name1">{{items.goodsName}}</div>
        </router-link>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem, Popup } from 'mint-ui'
import Vue from 'vue'
import {
  mapMutations
} from 'vuex'

Vue.component(Popup.name, Popup)

// import * as Apis from '@/requests/apis'
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
export default {
  name: 'Detail',
  props: ['id'],
  data () {
    return {
      index: null,
      clothes: [],
      clothes2: []
    }
  },
  created () {
    this.index = this.$route.query.id
    this.$http.get('https://www.only.cn/api/goods/dmpRecommendGoods?projectName=firstPageHot&brand=one&userId=&brandCode=ONLY')
      .then(resp => {
        if (this.$route.query.id.length > 2) {
          this.clothes = resp.data.data.filter(items => items.colorCode === this.$route.query.id)[0]
        } else {
          this.clothes = resp.data.data[this.index]
        }
        for (let i = 0; i < 7; i++) {
          this.clothes2.push(resp.data.data[parseInt(Math.random() * 50)])
        }
      })
  },
  methods: {
    ...mapMutations(['addCart']),
    reload () {
      this.$router.go(0)
    }
  }
}
</script>

<style lang='scss'>
.randomitem{
  width: 100%;
  img{
    width: 100%;
  }
}
.like{
  width: 100%;
  text-align: center;
  margin-top: 50px;
}
.wg-detail {
  text-align: center;

  .mint-swipe{

    height: 400px;

    img{
      height: 600px;
      width: 100%;
    }
  }
  .name{
    font-size: 20px;
    margin-top: 10px;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }

  .price{
    margin-top: 10px;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-around;

    span{
      color:#fff;
      background-color: red;
    }
  }

  .color {
    margin-bottom: 10px;
  }

  .size {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
    height: 22px;
    line-height: 22px;

    span {
      display: block;
      width: 10%;
      height: 20px;
      border: 1px solid #ccc;
      line-height: 20px;
    }

    .active {
      background-color: #fdc;
    }
  }
}
</style>
